<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        .button {
            border-radius: 5px;
            display: inline-block;
        }

        .button:hover {
            background-color: rgba(0, 0, 0, 0.2);
        }

        .button:active {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .note-button {
            backdrop-filter: blur(20px);
            border-radius: 8px;
            padding: 15px;
            transition-property: box-shadow, background-color, margin-top, margin-bottom, scale;
            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
            transition-duration: .1s;
            background-color: rgba(0, 0, 0, 0.1);

        }

        .note-button:hover {
            box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
            background-color: rgba(255, 255, 255, 0.1);
            margin-top: 5px;
            margin-bottom: 5px;
            scale: 1.01;
        }

        .note-button:active {
            scale: 0.99;
            margin-top: -1px;
            margin-bottom: -1px;
            box-shadow: 0 0 0 transparent;
        }

        #bg {
            transition-property: opacity, scale;
            opacity: 0;
            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
            transition-duration: 1s;
        }
    </style>
    <script>
        function formatTimeNew(inputTime = new Date()) {
            function getPeriod(hours) {
                if (hours >= 0 && hours < 6) {
                    return '凌晨';
                } else if (hours >= 6 && hours < 11) {
                    return '上午';
                } else if (hours >= 11 && hours < 14) {
                    return '中午';
                } else if (hours >= 14 && hours < 18) {
                    return '下午';
                } else {
                    return '晚上';
                }
            }

            function getWeekName(n) {
                switch (n) {
                    case 0:
                        return '星期天'
                    case 1:
                        return '星期一'
                    case 2:
                        return '星期二'
                    case 3:
                        return '星期三'
                    case 4:
                        return '星期四'
                    case 5:
                        return '星期五'
                    case 6:
                        return '星期六'
                }
            }
            let currentTime = new Date()
            let oneDaySecond = 86400000
            let currentDayStart = new Date(currentTime.getTime() - currentTime.getHours() * 60 * 60 * 1000 - currentTime
                .getMinutes() * 60 * 1000 - currentTime.getSeconds() * 1000)
            let lastDayStart = new Date(currentTime.getTime() - currentTime.getHours() * 60 * 60 * 1000 - currentTime
                .getMinutes() * 60 * 1000 - currentTime.getSeconds() * 1000 - oneDaySecond)
            let nextDayStart = new Date(currentTime.getTime() - currentTime.getHours() * 60 * 60 * 1000 - currentTime
                .getMinutes() * 60 * 1000 - currentTime.getSeconds() * 1000 + oneDaySecond)
            let nextDayEnd = new Date(currentTime.getTime() - currentTime.getHours() * 60 * 60 * 1000 - currentTime
                .getMinutes() * 60 * 1000 - currentTime.getSeconds() * 1000 + oneDaySecond * 2)
            let prefix = ''
            if (inputTime >= currentDayStart && inputTime < nextDayStart) {
                prefix = '今天'
            }
            if (inputTime >= lastDayStart && inputTime < currentDayStart) {
                prefix = '昨天'
            }
            if (inputTime >= nextDayStart && inputTime < nextDayEnd) {
                prefix = '明天'
            }
            if (prefix == '') {
                prefix = (inputTime.getFullYear() == currentTime.getFullYear() ? '' : inputTime.getFullYear().toString() +
                    '年') + (inputTime.getMonth() + 1).toString() + '月' + inputTime.getDate() + '日 '
            }
            prefix += getPeriod(inputTime.getHours()) + ' '
            prefix += inputTime.getHours().toString() + ':'
            if (inputTime.getMinutes() < 10) {
                prefix += '0'
            }
            prefix += inputTime.getMinutes().toString() + ' '
            prefix += getWeekName(inputTime.getDay())
            return prefix
        }

        function requestData(url, usePrefix = true) {
            const urlPrefix = 'http://127.0.0.1:1000/api'
            return new Promise((resolve, reject) => {
                fetch((usePrefix ? urlPrefix : '') + url, {
                    method: 'get'
                }).then(async res => {
                    let re = await res.json()
                    return resolve(re)
                }).catch(e => {
                    return resolve({
                        status: 0,
                        content: '请求失败'
                    })
                })
            })
        }
        async function init() {
            let re = await requestData('https://api.xygeng.cn/openapi/bing/', false)
            document.getElementById('bg').style.backgroundImage = `url(${re.data.url})`
            document.getElementById('bg').style.opacity = 1
            document.getElementById('bg').style.scale = 1

            let notes = await requestData('/note_list')
            if (notes.status == 1) {

                notes = notes.data
                if (notes.length == 0) {
                    document.getElementById('note_list').innerHTML = '笔记列表为空'
                    return
                }
                notes.sort((a, b) => {
                    return (new Date(a.time) - new Date(b.time)) * -1
                })
                let notesHTML = ''
                for (let i = 0; i < notes.length; i++) {
                    notesHTML += `<div onclick="handleGetNoteInfo(${notes[i].id})" class="note-button" style="width: 100%;display: flex;flex-direction: column;gap: 8px;flex-direction: column;"><div style="font-size: 20px;text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;width: 100%;overflow: hidden;">${notes[i].title}</div><div style="font-size: 14px;text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;width: 100%;overflow: hidden;">${notes[i].content}</div><div style="font-size: 14px;text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;width: 100%;overflow: hidden;color: rgba(0,0,0,0.5);">${formatTimeNew(new Date(notes[i].time))}</div></div>`
                }
                document.getElementById('note_list').innerHTML = notesHTML
            }
        }

        async function handleGetNoteInfo(id) {
            console.log(id)
            window.open('/edit.html?id=' + id.toString(), '_blank')
        }

        async function handleNewNote() {
            let re = await requestData('/new_note', true)
            if (re.status == 1) {
                init()
                handleGetNoteInfo(re.data)
            } else {
                alert(re.content)
            }
        }
        
        function handleOnShow(){
            console.log(1)
        }
    </script>
</head>

<body onload="init()" onshow="handleOnShow()"
    style="width: 100vw;height: 100vh;background-position: center;background-size: cover;background-repeat: no-repeat;transition: background-image .3s cubic-bezier(0.23, 1, 0.320, 1);overflow: hidden;">
    <div id="bg"
        style="width: 100vw;height: 100vh;left: 0;top: 0;position: fixed;background-size: cover;scale: 1.2;z-index: 10;">

    </div>
    <div
        style="width: 100vw;height: 100vh;background-color: rgba(255,255,255,0.6);position: fixed;left: 0;top: 0;z-index: 100;">
        <div style="width: 100%;height: 80px;text-align: center;">
            <div style="height: 80px;max-width: 1200px;width: 90%;display: inline-block;">
                <div
                    style="width: 100%;height: 100%;display: flex;align-items: flex-end;justify-content: flex-start;font-size: 32px;padding-bottom: 5px;">
                    笔记

                    <div class="button"
                        style="width: 32px;height: 32px;position: relative;left: 8px;bottom: 3px;margin-left: 5px;">
                        <div onclick="init()"
                            style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                            <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M29 20a1 1 0 01-1-1v-2a1 1 0 011-1h6.49c-2.53-3.627-6.732-6-11.49-6-7.732 0-14 6.268-14 14s6.268 14 14 14c6.342 0 11.699-4.217 13.42-10h4.134C39.734 36.017 32.566 42 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c5.655 0 10.701 2.608 14.001 6.687L38 7a1 1 0 011-1h2a1 1 0 011 1v11a2 2 0 01-1.85 1.994L40 20H29z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>

                    <div class="button"
                        style="width: 32px;height: 32px;position: relative;left: 8px;bottom: 3px;margin-left: 5px;">
                        <div onclick="handleNewNote()"
                            style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
                            <svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M24 3.996V8H10v32l14-8.669 14 8.617L37.999 22h4L42 43.983a2 2 0 01-3.04 1.709l-13.92-8.474a2 2 0 00-2.08 0L9.04 45.691A2 2 0 016 43.983V5.996a2 2 0 012-2h16zM36.718 2c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77V8h4.718c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134H38L38 16.718c0 .446-.046.608-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134h-1.436c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77L33.999 12 29.282 12c-.446 0-.608-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.162-.088.324-.134.77-.134L34 7.999V3.282c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.163-.088.324-.134.77-.134h1.436z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px);overflow-y: auto;padding-top: 15px;">
            <div
                style="max-width: 1200px;width: 90vw;display: inline-block;position: relative;left: 50vw;transform: translateX(-50%);padding-bottom: 48px;gap: 8px;">
                <div style="width: 100%;height: 100%;display: flex;flex-direction: column;gap: 8px;" id="note_list">
                    正在获取笔记
                </div>

            </div>
        </div>
    </div>
</body>

</html>